<template>
	<view class="userinfo">
		<!--头像 + 背景-->
		<view class="user-section" :class="'bg-' + themeColor.name">
			<!-- <img class="bg" src="./../../../static/user-bg.png"></img> -->
			<!--h5直接上传头像-->
			<view class="portrait-box" @tap="uploadImage">
				<img class="portrait" :src="profileInfo.avatar || headImg"></img>
			</view>
		</view>
		<view class="input-content">
			<view class="input-item">
				<text class="tit">手机号</text>
				<input type="number" v-model="profileInfo.phone" placeholder="请输入手机号码" />
			</view>
			<view class="input-item">
				<text class="tit">昵　称</text>
				<input type="text" v-model="profileInfo.nickName" placeholder="请输入您的昵称" />
			</view>
			<button class="confirm-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading" :loading="btnLoading"
				@tap="toUpdateInfo">
				修改资料
			</button>
		</view>
	</view>
</template>

<script>
	/**
	 * @des 修改用户信息
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-01-10 14:28
	 * @copyright 2019
	 */
	import {
		saveUserInfo,
		upload
	} from '@/api/product';

	import avatar from '@/components/rf-avatar/rf-avatar';
	import moment from '@/common/moment';

	export default {
		components: {
			avatar
		},
		data() {
			return {
				loadProgress: 0,
				CustomBar: this.CustomBar,
				profileInfo: {
					avatar: '',
					nickname: '',
					phone: ''
				},
				genders: [{
						value: '0',
						name: '未知'
					},
					{
						value: '1',
						name: '男'
					},
					{
						value: '2',
						name: '女'
					}
				],
				date: moment().format('YYYY-MM-DD'),
				token: null,
				loading: false,
				headImg: this.$mAssetsPath.headImg,
				userBg: this.$mAssetsPath.userBg,
				btnLoading: false
			};
		},
		onLoad() {
			this.initData();
			this.profileInfo.phone = this.getUserInfo.phone
			this.profileInfo.avatar = this.getUserInfo.avatar
			this.profileInfo.nickName = this.getUserInfo.nickname
		},
		computed: {
			getUserInfo() {
				return this.$mStore.state.userInfo
			}
		},
		methods: {
			// 上传头像
			uploadImage() {
				// 从相册选择图片
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.handleUploadFile(res.tempFiles[0]);
					}
				});
			},
			// 上传头像
			handleUploadFile(data) {
				const _self = this;
				uni.uploadFile({
					url: 'http://zhujinadmin.boundary.vip/api/index/upload', // 后端api接口
					filePath: data.path, // uni.chooseImage函数调用后获取的本地文件路劲
					name: 'file', //后端通过'file'获取上传的文件对象
					formData: {},
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code == 200) {
							_self.profileInfo.avatar = data.data.url
							console.log(_self.profileInfo)
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 监听日期更改
			bindDateChange(e) {
				this.date = e.target.value;
			},
			// 监听性别更改
			handleGenderChange(e) {
				this.profileInfo.gender = e.detail.value;
			},
			// 数据初始化
			initData() {
				this.token = uni.getStorageSync('accessToken') || undefined;
			},
			// 更新用户信息
			async toUpdateInfo() {
				this.handleUpdateInfo();
			},
			// 更新用户信息
			async handleUpdateInfo() {
				this.btnLoading = true;
				this.loadProgress = this.loadProgress + 6;
				const timer = setInterval(() => {
					this.loadProgress = this.loadProgress + 6;
				}, 50);
				await this.$http
					.post(`${saveUserInfo}`, {
						...this.profileInfo
					})
					.then(() => {
						clearInterval(timer);
						this.loadProgress = 0;
						this.$mHelper.toast('恭喜您, 资料修改成功!');
						setTimeout(() => {
							this.$mRouter.back();
						}, 1 * 1000);
						let userinfo = this.getUserInfo
						userinfo.nickname = this.profileInfo.nickName
						userinfo.phone = this.profileInfo.phone
						userinfo.avatar = this.profileInfo.avatar
						this.$store.commit('login', userinfo)
						this.$emit('loginOk', userinfo)
					})
					.catch(() => {
						this.btnLoading = false;
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: $color-white;
	}

	.userinfo {
		.user-section {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 320upx;
			padding: 40upx 30upx 0;
			overflow: hidden;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				opacity: 0.84;
			}

			.portrait-box {
				clear: both;
				z-index: 2;
			}

			.portrait {
				position: relative;
				width: 200upx;
				height: 200upx;
				border-radius: 50%;
				border: 6upx solid #fff;
			}

			.yticon {
				position: absolute;
				line-height: 1;
				z-index: 5;
				font-size: 48upx;
				color: #fff;
				padding: 4upx 6upx;
				border-radius: 6upx;
				background: rgba(0, 0, 0, 0.4);
			}

			.pt-upload-btn {
				right: 0;
				bottom: 10upx;
			}

			.bg-upload-btn {
				right: 20upx;
				bottom: 16upx;
			}
		}

		.input-content {
			padding: 40upx 60upx;

			.input-item {
				display: flex;
				padding: 0 30upx;
				background: $page-color-light;
				height: 80upx;
				line-height: 80upx;
				border-radius: 4px;
				margin-bottom: 30upx;

				&:last-child {
					margin-bottom: 0;
				}

				.tit {
					width: 100upx;
					font-size: $font-sm + 2upx;
					color: $font-color-base;
				}

				input {
					width: calc(100% - 100upx);
					height: 80upx;
					line-height: 80upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}

				.date {
					height: 80upx;
					line-height: 80upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}

				.gender-item {
					margin-right: 20upx;

					.gender-item-text {
						padding-left: 10upx;
					}

					radio .wx-radio-input.wx-radio-input-checked {
						background: $uni-color-primary;
						border-color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>
